.strength-meter-bar {
  position: relative;
  height: 6px;
  margin: 0 auto;
  border-radius: 6px;
  background-color: var(--ant-color-bg-layout);

  &::before,
  &::after {
    content: '';
    display: block;
    position: absolute;
    z-index: 10;
    width: 20%;
    height: inherit;
    border-width: 0 5px;
    border-style: solid;
    border-color: var(--ant-color-bg-container);
    background-color: transparent;
  }

  &::before {
    left: 20%;
  }

  &::after {
    right: 20%;
  }
}

.strength-meter-bar-item {
  position: absolute;
  height: inherit;
  transition:
    width 0.5s ease-in-out,
    background 0.25s;
  border-radius: inherit;
}

:global(html.dark) {
  .strength-meter-bar {
    background-color: var(--ant-color-bg-container);

    &::before,
    &::after {
      border-color: var(--ant-color-bg-layout);
    }
  }
}
